@use '@angular/material' as mat;
@import './breakpoint';

$color-theme: (
  success: (
    text: #3c763d,
    border: #b2dba1,
    bg: #dff0d8,
  ),
  shadow: (
    text: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700),
    border: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 400),
    bg: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 100),
  ),
  light: (
    text: #fff,
    border: #fff,
    bg: #fff,
  ),
);

$font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

// custom typography
// https://material.angular.io/guide/typography
$custom-typography: mat.m2-define-typography-config(
  $font-family: $font-family,
  $headline-1:
    mat.m2-define-typography-level(60px, 1.25, 600, $font-family: $font-family),
  $headline-2:
    mat.m2-define-typography-level(48px, 1.25, 600, $font-family: $font-family),
  $headline-3:
    mat.m2-define-typography-level(40px, 1.25, 600, $font-family: $font-family),
  $headline-4:
    mat.m2-define-typography-level(30px, 1.5, 600, $font-family: $font-family),
  $headline-5:
    mat.m2-define-typography-level(25px, 1.618, 600, $font-family: $font-family),
  $headline-6:
    mat.m2-define-typography-level(20px, 1.618, 500, $font-family: $font-family),
  $body-2: mat.m2-define-typography-level(16px, 1.618, 400),
  $subtitle-2: mat.m2-define-typography-level(14px, 1.618, 500),
);

$spacer: 40px;

.mat-headline-4,
.mat-display-4 {
  font-size: 20px !important;
}

@media (min-width: 600px) {
  .mat-headline-4,
  .mat-display-4 {
    font-size: calc(20px + 10 * ((100vw - 600px) / (1440 - 600))) !important;
  }
}

@media (min-width: 1440px) {
  .mat-headline-4,
  .mat-display-4 {
    font-size: 30px !important;
  }
}

.mat-headline-3,
.mat-display-3 {
  font-size: 24px !important;
}

@media (min-width: 600px) {
  .mat-headline-3,
  .mat-display-3 {
    font-size: calc(24px + 10 * ((100vw - 600px) / (1440 - 600))) !important;
  }
}

@media (min-width: 1440px) {
  .mat-headline-3,
  .mat-display-3 {
    font-size: 40px !important;
  }
}

.mat-headline-2,
.mat-display-2 {
  font-size: 32px !important;
}

@media (min-width: 600px) {
  .mat-headline-2,
  .mat-display-2 {
    font-size: calc(32px + 16 * ((100vw - 600px) / (1440 - 600))) !important;
  }
}

@media (min-width: 1440px) {
  .mat-headline-2,
  .mat-display-2 {
    font-size: 48px !important;
  }
}

.mat-headline-1,
.mat-display-1 {
  font-size: 40px !important;
}

@media (min-width: 600px) {
  .mat-headline-1,
  .mat-display-1 {
    font-size: calc(40px + 20 * ((100vw - 600px) / (1440 - 600))) !important;
  }
}

@media (min-width: 1440px) {
  .mat-headline-1,
  .mat-display-1 {
    font-size: 60px !important;
  }
}
